UI設計及即時生成瀏覽效果-語言記憶

UI設計及即時生成瀏覽效果-語言記憶:

Author:

Z-hwA

github連結

點這裡

(一) 概要:

基本功能包括，手動輸入單字卡、建立單字卡倉庫，單字卡測驗、單字卡即時生成等等。其中遇上各種UI設計，坐標軸的設定、中文字顯示模糊等問題。後續透過資料查詢一一解決。並在單字卡顯示上，不使用Unity的滑動視窗一次性大量生成，而是透過代碼，即時生成，以降低手機端效能浪費問題的可能性。

(圖一) 語言記憶基礎介面。

(二) 使用方式:

直接輸入單字，並選擇儲存的倉庫，儲存，即可生成單字卡。透過測試，可選擇測試的倉庫、單字數、外語對母語、母語對外語等設定，進行測試。倉庫中能夠翻閱以儲存的單字，並確認答對率。

(三) UI介面:

在基礎UI上，選擇Scale With Screen Size，以確保整體畫布自適應螢幕大小，內層加入橫向滑動視窗，以切換不同頁面。

字體模糊問題上，有兩種處理方式，一是自行添加中文字庫，二是將字體大小設置極大，在透過Rect Transform將Scale設置極小，以達到清晰化的目的。由於字庫一次匯入字數有限，過多會使的字體同樣不清晰，加上無法確保所有字都存在其中。最終選擇第二種方案。

(圖二) 字體模糊問題解決方案。

倉庫方面，面對的問題是無法達成，依照版面生成Prefers的效果，最終只能設置固定的位置點，在建立倉庫指令後，於固定的位置點生成，亦無法做到刪除倉庫的動作。最終，在倉庫中提供重新命名以解決這個問題。

(圖三) 倉庫介面。

(四) 資料儲存與添加方式:

透過json的方式做資料的儲存。在單字和倉庫的儲存上面，將單字陣列存在倉庫陣列裡面，需要載入時，轉成List之後，再添加回去。在單字、倉庫的建立上，也是先將陣列轉為List之後，添加完再載入回陣列。

1.	//轉成List添加單字
2.	            List<Struct.wordMode> tem = new List<Struct.wordMode>(Store.instance.group[storeIndex].word);
3.	            Struct.wordMode word;
4.	            tem.Add(word);
5.	
6.	            //轉回去
7.	            Store.instance.group[storeIndex].word = tem.ToArray();

(圖四) List轉換Array(Word_Memory_App\Assets\Scripts\BasicSystem.cs) (完整程式碼可在附錄的遊戲檔中取得。以下省略，僅保留程式碼路徑)。

(五) 單字即時生成效果:

透過判定單字展示頁面，經手指滑動後的位置，確認從上方或下方新增單字。接著，刪除相反方向的單字卡物件，同時，啟動生成單字的函式，生成單字的函式，則在應該生成單字的位置，生成下一個單字。

(圖五) 單字展示頁面，紅框中為鎖定單字滑條。

而左上角滑條，鎖定特定序號的單字功能。則是根據鎖定單字的序號，比較當前狀況，將單字顯示頁面的位置，鎖定成接收到手指滑動的狀態，使程式進入上一個程序中。

1.	        //發現單字數不足，自動生成單字
2.	        if (wordNum > 0 && word.Length < 6 && Store.instance.group[groupIndex].word.Length > nowWord)
3.	        {
4.	            CreateWord();
5.	        }
6.	
7.	        //向下滑動，動態新增
8.	        if(content.GetComponent<RectTransform>().position.y >= (posContent.y + 100f) && wordNum > 0 && Store.instance.group[groupIndex].word.Length > nowWord && time >= timeSet)
9.	        {
10.	            time = 0f;
11.	            mode = 0;
12.	            //Debug.Log(content.GetComponent<RectTransform>().position.y + "下方" + wordPos[2].transform.position.y);
13.	
14.	            //刪除物件
15.	            Destroy(word[0].gameObject);
16.	
17.	            //轉成List刪除
18.	            List<GameObject> tem = new List<GameObject>(word);
19.	            tem.RemoveAt(0);
20.	
21.	            //轉回去
22.	            word = tem.ToArray();
23.	            //Debug.Log(word.Length);
24.	            for (int i=0;i<word.Length;i++)
25.	            {
26.	                //Debug.Log(i);
27.	                word[i].gameObject.transform.position = new Vector2(wordPos[i].transform.position.x, wordPos[i].transform.position.y);
28.	            }
29.	        }